var pro = document.querySelector('#product')
var x
function fn(x) {
    var xhr2 = new XMLHttpRequest()
    //设置默认展示的商品信息为pageid=1
    xhr2.open('get', 'http://chst.vip:1234/api/getmoneyctrl?pageid=' + x)
    xhr2.send()
    xhr2.onreadystatechange = function () {
        if (xhr2.status === 200 && xhr2.readyState === 4) {
            var x2 = JSON.parse(xhr2.responseText).result
            console.log(x2)
            var html2 = ""
            x2.forEach((item) => {
                html2 += `<a value=${item.productId}>${item.productImgSm}<b>${item.productName}<span>${item.productPinkage}</span></b><h1>${item.productFrom}|${item.productTime}</h1><h2>${item.productComCount}</h2></a>`
            })
            pro.innerHTML = html2
            //给所有的#product的子元素a 设置属性
            var proa = document.querySelectorAll('#product>a')
            console.log(proa)
            proa.forEach((item) => {
                item.style.height = '3.467rem'
                item.style.display = 'block'
                item.style.position = 'relative'
                item.onclick=function(){
                    var productid=this.getAttribute('value')
                    console.log(productid)
                     location.href=`./index跳转页.html?productid=${productid}`
                }
            })
            //给所有的#product的immg设置属性
            var proimg = document.querySelectorAll('#product>a>img')
            console.log(proimg)
            proimg.forEach((item) => {
                item.style.width = "2.667rem"
                item.style.height = "2.667rem"
                item.style.margin = '.3rem'
            })
            //给所有的#product的b设置属性
            var prob = document.querySelectorAll('#product>a>b')
            console.log(prob)
            prob.forEach((item) => {
                item.style.display = "block"
                item.style.width = "6.5rem"
                item.style.height = "1.5rem"
                item.style.fontSize = '0.4rem'
                item.style.position = "absolute"
                item.style.left = "3rem"
                item.style.top = ".4rem"


            })
            //给所有的#product的span设置属性
            var prospan = document.querySelectorAll('#product>a>b>span')
            prospan.forEach((item) => {
                item.style.color = "red"
                //     item.style.position='absolute'
                //     item.style.left="3rem"
                //     item.style.top="1rem"
                //     item.style.fontSize='0.4rem'
            })
            //给#product的h1设置属性
            var proh1 = document.querySelectorAll('#product>a>h1')
            proh1.forEach((item) => {
                item.style.position = 'absolute'
                item.style.left = "3rem"
                item.style.top = "2.1rem"
                item.style.fontSize = '0.36rem'
                item.style.fontWeight = "normal"
            })
            //给#product的h2设置属性
            var proh2 = document.querySelectorAll('#product>a>h2')
            proh2.forEach((item) => {
                item.style.position = 'absolute'
                item.style.left = "7.8rem"
                item.style.top = "2.1rem"
                item.style.fontWeight = "normal"
                item.style.fontSize = '0.36rem'
            })
        }
    }
}
fn(x)
var x = 0
var btn1 = document.querySelector('.btn1')
var btn2 = document.querySelector('.btn2')
var sel = document.querySelector('select')
console.log(sel.value) //获取下拉页码框的值
btn1.disabled = true
btn1.onclick = function () {
    x--
    sel.value = x
    // console.log(sel.value)
    btn2.disabled = false//btn1只要点击了，x--，x肯定不会是14了，btn2肯定会解锁
    //  console.log(x) 
    fn(x)//调用商品加载的ajax代码
    if (x === 0) {
        btn1.disabled = true
    }
}
btn2.onclick = function () {
    x++
    sel.value = x
    // console.log(sel.value)
    btn1.disabled = false//btn2只要点击了，x++，x肯定不会为0了，btn1肯定会解锁
    //  console.log(x) 
    fn(x)//调用商品加载的ajax代码
    if (x === 14) {
        btn2.disabled = true
    }
}
sel.onchange = function () {//sel页码选项框跳转商品加载事件
    console.log(sel.value)
    x = sel.value
    fn(x)          //  ？？此处判断有问题，sel页码选项框选到14和0，按钮无法锁住
     if(x!==0&&x!==14){
        btn1.disabled=false
        btn2.disabled=false  
     }
     if(x==14){
        btn2.disabled=true
        btn1.disabled=false
    }
    if(x==0){
        btn1.disabled=true
        btn2.disabled=false
    }
}
//书写返回index.html功能
var fanhui=document.querySelector('header>a')
fanhui.onclick=function(){
    location.href="../index.html"
}






